<style lang="scss" scoped>
    svg {
        //background: rgba(200, 200, 200);
        border: 2px solid #888;
    }

    #tooltipObjectMap {
        display: none;
        position: absolute;
        background: black;
        border-radius: 3px;
        color: white;
        padding: 3px 7px;
        z-index: 100;

        &:before {
            display: block;
            content: ' ';
            width: 0;
            height: 0;
            position: absolute;
            bottom: -10px;
            left: 10px;
            border-top: 10px solid black;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
    }
</style>

<template>
    <div style="position: relative;">
        <div id="tooltipObjectMap" ref="tooltipObjectMap"></div>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :viewBox="viewBox" xml:space="preserve">
            <defs>
                <marker id="arrowhead" markerWidth="5" markerHeight="4" refX="2" refY="2" orient="auto">
                    <polygon points="0 0, 5 2, 0 4" :fill="coordinationCrossColor" />
                </marker>
            </defs>
            <line :x1="convertX(0)" :y1="convertY(1)" :x2="convertX(stepperXmax / 4)" :y2="convertY(1)" :stroke="coordinationCrossColor" stroke-width="2" marker-end="url(#arrowhead)" />
            <line :x1="convertX(1)" :y1="convertY(0)" :x2="convertX(1)" :y2="convertY(stepperYmax / 4)" :stroke="coordinationCrossColor" stroke-width="2" marker-end="url(#arrowhead)" />
            <g>
                <line v-for="x in xStripes" v-bind:key="'xLines'+x" :x1="convertX(x)" :x2="convertX(x)" :y1="convertY(stepperYmin)" :y2="convertY(stepperYmax)" :stroke="coordinationCrossColor" :stroke-opacity="0.25" stroke-width="1" />
                <line v-for="y in yStripes" v-bind:key="'yLines'+y" :x1="convertX(stepperXmin)" :x2="convertX(stepperXmax)" :y1="convertY(y)" :y2="convertY(y)" :stroke="coordinationCrossColor" :stroke-opacity="0.25" stroke-width="1" />
            </g>

            <g v-for="(object, index) in printing_objects" v-bind:key="index">
                <polygon
                    :points="object.polygon.map(point => convertX(point[0])+','+convertY(point[1])).join(' ')"
                    style="cursor: pointer;"
                    :stroke="current_object === object.name ? primaryColor : '#666'"
                    stroke-width="2"
                    fill-rule="evenodd"
                    :fill="hoverName === object.name ? primaryColor : (excluded_objects.includes(object.name) ? '#6668' : '#bbb')"
                    @mouseover="showObjectTooltip(object.name)"
                    @mouseout="hideObjectTooltip"
                    @click="openExcludeObjectDialog(object.name)"
                />
            </g>
        </svg>
    </div>
</template>

<script lang="ts">
import Component from 'vue-class-component'
import {Mixins, Prop} from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import {defaultPrimaryColor} from '@/store/variables'

@Component
export default class StatusPanelObjectsDialogMap extends Mixins(BaseMixin) {
    private coordinationCrossColor = '#888'
    private stripesOffset = 50

    @Prop({ required: false, default: '' }) readonly hoverName!: string

    $refs!: {
        tooltipObjectMap: HTMLDivElement
    }

    get printing_objects() {
        return this.$store.state.printer.exclude_object?.objects ?? []
    }

    get current_object() {
        return this.$store.state.printer.exclude_object?.current_object ?? null
    }

    get excluded_objects() {
        return this.$store.state.printer.exclude_object?.excluded_objects ?? []
    }

    get viewBox() {
        return this.convertX(this.stepperXmin)+' '+this.convertY(this.stepperYmax)+' '+this.absoluteX+' '+this.absoluteY
    }
    
    get stepperXmin() {
        return this.$store.state.printer.configfile?.settings?.stepper_x?.position_min ?? 0
    }
    
    get stepperXmax() {
        return this.$store.state.printer.configfile?.settings?.stepper_x?.position_max ?? 0
    }
    
    get stepperYmin() {
        return this.$store.state.printer.configfile?.settings?.stepper_y?.position_min ?? 200
    }
    
    get stepperYmax() {
        return this.$store.state.printer.configfile?.settings?.stepper_y?.position_max ?? 200
    }

    get absoluteX() {
        return Math.abs(this.stepperXmin) + Math.abs(this.stepperXmax)
    }

    get absoluteY() {
        return Math.abs(this.stepperYmin) + Math.abs(this.stepperYmax)
    }

    get xStripes() {
        const output = []
        const minXstripe = Math.floor(this.stepperXmin / this.stripesOffset) * this.stripesOffset
        const maxXstripe = Math.floor(this.stepperXmax / this.stripesOffset) * this.stripesOffset

        for (let i = minXstripe; i <= maxXstripe; i = i + this.stripesOffset) {
            output.push(i)
        }

        return output
    }

    get yStripes() {
        const output = []
        const minYstripe = Math.floor(this.stepperYmin / this.stripesOffset) * this.stripesOffset
        const maxYstripe = Math.floor(this.stepperYmax / this.stripesOffset) * this.stripesOffset

        for (let i = minYstripe; i <= maxYstripe; i = i + this.stripesOffset) {
            output.push(i)
        }

        return output
    }

    get primaryColor() {
        return this.$store.state.gui.theme?.primary ?? defaultPrimaryColor
    }

    convertX(x: number) {


        return x
    }

    convertY(y: number) {

        return y * -1
    }

    showObjectTooltip(text: string) {
        if (this.$refs.tooltipObjectMap) {
            this.$refs.tooltipObjectMap.innerHTML = text
            this.$refs.tooltipObjectMap.style.display = 'block'
        }

        window.addEventListener('mousemove', this.moveTooltip)
    }

    hideObjectTooltip() {
        if (this.$refs.tooltipObjectMap) {
            this.$refs.tooltipObjectMap.style.display = 'none'
        }

        window.removeEventListener('mousemove', this.moveTooltip)
    }

    moveTooltip(event: any) {
        if (this.$refs.tooltipObjectMap) {
            this.$refs.tooltipObjectMap.style.left = (event.layerX - 20) + 'px'
            this.$refs.tooltipObjectMap.style.top = (event.layerY - 45) + 'px'
        }
    }

    openExcludeObjectDialog(name: string) {
        this.$emit('update:name', name)
        this.$emit('update:bool', true)
    }
}
</script>